<template>
  <div class="interviewer-self-problem-set-manage">
    <el-card>
      <el-tag>面试官个人题库管理</el-tag>
      <el-table :data="problemData" style="width: 100%" :stripe="true">
        <el-table-column prop="id" label="#" width="80"> </el-table-column>
        <el-table-column prop="title" label="题目" width="300">
          <template slot-scope="scope">
            <el-link type="primary" @click="onProblemClick(scope.row)">
              {{ scope.row.title }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度"> </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="onProblemUpdate(scope.row)"
            >
              更新
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="onProblemRemove(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="->,sizes,prev, pager, next,jumper"
        :page-sizes="[5, 10, 20]"
        :current-page="this.pagination.pageNum"
        :page-size="this.pagination.pageSize"
        :page-count="this.pagination.pageCount"
        :pager-count="5"
        @size-change="onPageSizeChange"
        @current-change="onPageNumChange"
      >
      </el-pagination>

      <el-button type="primary" @click="onProblemAdd"> 添加题目 </el-button>
    </el-card>

    <el-dialog
      title="添加题目"
      :visible.sync="dialogAddVisible"
      :before-close="beforeDialogAddClose"
      append-to-body
    >
      <el-form
        ref="problemAddForm"
        :model="problem"
        :rules="problemRules"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item label="题目名称" prop="title">
          <el-input
            v-model="problem.title"
            placeholder="请输入题目名称"
            @keydown.enter.native="onProblemAddConfirm"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目难度" prop="difficulty">
          <el-radio-group v-model="problem.difficulty">
            <el-radio :label="0">待定</el-radio>
            <el-radio :label="1">简单</el-radio>
            <el-radio :label="2">中等</el-radio>
            <el-radio :label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题目描述" prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 6 }"
            placeholder="请输入题目描述"
            v-model="problem.content"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目类型" prop="status">
          <el-radio-group v-model="problem.status">
            <el-radio :label="0">公有题目</el-radio>
            <el-radio :label="1">私有题目</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="题目图片">
          <el-upload
            :action="actionURL"
            ref="uploadPic"
            drag
            multiple
            :limit="1"
            :file-list="picList"
            list-type="picture"
            :auto-upload="false"
            :on-preview="onPicClick"
            :on-exceed="onPicNumsOver"
            :on-remove="onPicRemove"
            :before-remove="beforePicRemove"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将图片拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button @click="onProblemAddCancel">取消</el-button>
        <el-button type="primary" @click="onProblemAddConfirm">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="更新题目"
      :visible.sync="dialogUpdateVisible"
      :before-close="beforeDialogUpdateClose"
      append-to-body
    >
      <el-form
        ref="problemUpdateForm"
        :model="problem"
        :rules="problemRules"
        label-width="80px"
        @submit.native.prevent
      >
        <el-form-item label="题目名称" prop="title">
          <el-input
            v-model="problem.title"
            placeholder="请输入题目名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目难度" prop="difficulty">
          <el-radio-group v-model="problem.difficulty">
            <el-radio :label="0">待定</el-radio>
            <el-radio :label="1">简单</el-radio>
            <el-radio :label="2">中等</el-radio>
            <el-radio :label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题目描述" prop="content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 6 }"
            placeholder="请输入题目描述"
            v-model="problem.content"
          ></el-input>
        </el-form-item>
        <el-form-item label="题目类型" prop="status">
          <el-radio-group v-model="problem.status">
            <el-radio :label="0">公有题目</el-radio>
            <el-radio :label="1">私有题目</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="题目图片">
          <el-upload
            :action="actionURL"
            ref="uploadPic"
            drag
            multiple
            :limit="1"
            :file-list="picList"
            list-type="picture"
            :auto-upload="false"
            :on-preview="onPicClick"
            :on-exceed="onPicNumsOver"
            :on-remove="onPicRemove"
            :before-remove="beforePicRemove"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将图片拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button @click="onProblemUpdateCancel">取消</el-button>
        <el-button type="primary" @click="onProblemUpdateConfirm"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="删除题目"
      :visible.sync="dialogRemoveVisible"
      :before-close="beforeDialogRemoveClose"
      append-to-body
    >
      <span>确认删除此问题？</span>
      <div slot="footer">
        <el-button @click="onProblemRemoveCancel">取消</el-button>
        <el-button type="primary" @click="onProblemRemoveConfirm"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="题目详情"
      :visible.sync="dialogDescriptionVisible"
      :before-close="beforeDialogDescriptionClose"
      append-to-body
    >
      <el-form :model="problem" label-width="80px">
        <el-form-item label="题目名称">
          <div
            style="
              background-color: #f6f6f6;
              padding: 0 20px;
              border-radius: 4px;
            "
          >
            {{ this.problem.title }}
          </div>
        </el-form-item>
        <el-form-item label="题目难度">
          <el-rate
            v-if="problem.difficulty"
            v-model="problem.difficulty"
            :max="3"
            :texts="['简单', '中等', '困难']"
            show-text
            disabled
          ></el-rate>
          <el-tag v-else disable-transitions>待定</el-tag>
        </el-form-item>
        <el-form-item label="题目描述">
          <div
            style="
              background-color: #f6f6f6;
              padding: 0 20px;
              border-radius: 4px;
            "
          >
            {{ problem.content }}
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "InterviewerSelfProblemSetManage",
  components: {},
  mounted() {
    this.getProblemData();
  },
  methods: {
    setProblemDefault() {
      this.problem = {
        _id: "",
        title: "",
        difficulty: 0,
        content: "",
        status: 0,
      };
    },
    getProblemData() {
      axios
        .get("/api/problem/myproblem", {
          params: {
            pageNum: this.pagination.pageNum,
            pageSize: this.pagination.pageSize,
          },
        })
        .then((response) => {
          console.log(response);
          if (response.data.status == 1) {
            this.pagination.pageCount = response.data.result.totalPageNum;
            this.problemData = response.data.result.problemSet;
            if (this.problemData.length) {
              this.problemData.forEach((problem, index) => {
                problem["id"] =
                  index +
                  1 +
                  (this.pagination.pageNum - 1) * this.pagination.pageSize;
              });
            }
            this.$message.success("获取面试官个人题目成功");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取面试官个人题目失败");
        });
    },

    onPageSizeChange(pageSizeVal) {
      this.pagination.pageSize = pageSizeVal;
      this.getProblemData();
    },
    onPageNumChange(pageNumVal) {
      this.pagination.pageNum = pageNumVal;
      this.getProblemData();
    },

    // onPicClick(file) {
    //   console.log("onPicClick");
    //   console.log(file);
    //   // this.$refs["uploadPic"].submit();
    // },
    // beforePicRemove(file, fileList) {
    //   console.log("beforePicRemove");
    //   return this.$confirm(`确定移除 ${file.name}？`);
    // },
    // onPicRemove(file, fileList) {
    //   console.log("onPicRemove");
    //   console.log(file, fileList);
    // },
    // onPicNumsOver(file, fileList) {
    //   console.log("onPicNumsOver");
    //   this.$message.warning("当前限制选择 1 个文件");
    // },

    beforeDialogAddClose(done) {
      this.setProblemDefault();
      done();
    },
    beforeDialogUpdateClose(done) {
      this.setProblemDefault();
      done();
    },
    beforeDialogRemoveClose(done) {
      this.setProblemDefault();
      done();
    },
    beforeDialogDescriptionClose(done) {
      this.setProblemDefault();
      done();
    },

    onProblemAdd() {
      this.setProblemDefault();
      this.dialogAddVisible = true;
    },
    onProblemAddCancel() {
      this.dialogAddVisible = false;
      this.setProblemDefault();
    },
    onProblemAddConfirm() {
      this.$refs["problemAddForm"].validate((valid) => {
        if (valid) {
          //数据库添加操作
          axios
            .post("/api/problem/create", {
              problem_title: this.problem.title,
              difficulty: this.problem.difficulty,
              problem_content: this.problem.content,
              status: this.problem.status,
              image_url: "",
            })
            .then((response) => {
              console.log(response);
              this.dialogAddVisible = false;
              this.setProblemDefault();
              this.getProblemData();
              this.$message.success("添加题目成功");
            })
            .catch((error) => {
              console.log(error);
              this.dialogAddVisible = false;
              this.setProblemDefault();
              this.$message.error("添加题目失败");
            });
        } else {
          this.$message.warning("未正确填写相关信息");
        }
      });
    },

    onProblemUpdate(row) {
      this.problem = JSON.parse(JSON.stringify(row));
      this.dialogUpdateVisible = true;
    },
    onProblemUpdateCancel() {
      this.dialogUpdateVisible = false;
      this.setProblemDefault();
    },
    onProblemUpdateConfirm() {
      this.$refs["problemUpdateForm"].validate((valid) => {
        if (valid) {
          console.log(this.problem);
          //数据库更新操作
          axios
            .post("/api/problem/edit", {
              pid: this.problem._id,
              problem_title: this.problem.title,
              problem_content: this.problem.content,
              difficulty: this.problem.difficulty,
              status: this.problem.status,
            })
            .then((response) => {
              console.log(response);
              this.dialogUpdateVisible = false;
              this.setProblemDefault();
              this.getProblemData();
              this.$message.success("更新题目成功");
            })
            .catch((error) => {
              console.log(error);
              this.dialogUpdateVisible = false;
              this.setProblemDefault();
              this.$message.error("更新题目失败");
            });
        } else {
          this.$message.warning("未正确填写相关信息");
        }
      });
    },

    onProblemRemove(row) {
      this.problem = JSON.parse(JSON.stringify(row));
      this.dialogRemoveVisible = true;
    },
    onProblemRemoveCancel() {
      this.dialogRemoveVisible = false;
      this.setProblemDefault();
    },
    onProblemRemoveConfirm() {
      //数据库删除操作
      axios
        .get("/api/problem/delete", {
          params: {
            pid: this.problem._id,
          },
        })
        .then((response) => {
          console.log(response);
          this.dialogRemoveVisible = false;
          this.setProblemDefault();
          this.getProblemData();
          this.$message.success("删除题目成功");
        })
        .catch((error) => {
          console.log(error);
          this.dialogRemoveVisible = false;
          this.setProblemDefault();
          this.$message.error("删除题目失败");
        });
    },

    onProblemClick(row) {
      this.problem = JSON.parse(JSON.stringify(row));
      this.dialogDescriptionVisible = true;
    },
  },
  data() {
    return {
      pagination: {
        pageNum: 1,
        pageSize: 5,
        pageCount: 1,
      },

      dialogAddVisible: false,
      dialogUpdateVisible: false,
      dialogRemoveVisible: false,
      dialogDescriptionVisible: false,

      // actionURL: "",
      // picList: [],

      problem: {
        _id: "",
        title: "",
        difficulty: 0,
        content: "",
        status: 0,
      },
      problemData: [],
      // problemData: [
      //   {
      //     _id: "1",
      //     title: "test1",
      //     difficulty: 1,
      //     content: "111111",
      //     status: 1,
      //   },
      //   {
      //     _id: "2",
      //     title: "test2",
      //     difficulty: 2,
      //     content: "222222",
      //     status: 1,
      //   },
      //   {
      //     _id: "3",
      //     title: "test3",
      //     difficulty: 3,
      //     content: "333333",
      //     status: 1,
      //   },
      // ],
      problemRules: {
        title: [
          {
            required: true,
            message: "请输入题目名称",
            trigger: "blur",
          },
        ],
        difficulty: [
          {
            required: true,
            message: "请选择题目难度",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "请输入题目描述",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择题目类型",
            trigger: "change",
          },
        ],
      },
    };
  },
};
</script>

<style></style>
